<template>
		<view class="post-container">
			<view @click="toPost(postDate.id)">
				<!-- 用户信息 -->
				<view class="user-info">
				  <image class="avatar" :src="postDate.avatar" mode="aspectFill" />
				  <view class="user-details">
				    <text class="username">{{ postDate.nickName }}</text>
				    <text class="post-time">{{ postDate.gmtCreated }}</text>
				  </view>
				</view>
						
				<!-- 帖子内容 -->
				<view class="post-content">
							  <!-- 内容 -->
				  <text class="body">{{ postDate.content }}</text>
							  <!-- 图片 -->
				  <view class="post-images">
				    <image v-for="(img, index) in postDate.fileRecordDO" :key="index" 
							  :src="img.fileKey" class="post-image" mode="aspectFill" />
				  </view>
				</view>
				<!-- 点赞和评论 -->
				<view class="post-actions">
				  <view class="likes">
								<uni-icons v-if="postDate.like === '1'" type="hand-up-filled" size="30"></uni-icons>
								<uni-icons v-else type="hand-up" size="30"></uni-icons>
				    <text>{{ postDate.thumbs }}</text>
				  </view>
							<view class="likes">
								<uni-icons v-if="postDate.like === '1'" type="star-filled" size="30"></uni-icons>
								<uni-icons v-else type="star" size="30"></uni-icons>
							  <text>{{ postDate.collect }}</text>
							</view>
							<view class="likes">
								<uni-icons type="chat" size="30"></uni-icons>
							  <text>{{ commentCount }}</text>
							</view>
				</view>
			</view>
		  
		</view>
</template>

<script setup>
import { ref } from 'vue';
// 定义可以接受的对象
defineProps(['postDate'])

const isLiked = ref(false); // 点赞状态

const isCollect = ref(false); // 收藏状态

const commentCount = ref(30); // 评论数量

//跳转页面
const toPost=(item)=>{
	console.log("跳转页面"+item)
	uni.navigateTo({
		url:'/pages/Post/Post?taskId='+item
	})
}
</script>

<style scoped>
.post-container {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: bold;
  font-size: 16px;
}

.post-time {
  font-size: 12px;
  color: #8c8c8c;
}

.post-content {
  margin-bottom: 15px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.body {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}

.post-images {
  display: flex;
  gap: 10px;
}

.post-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

.post-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.likes,
.comments {
  display: flex;
  align-items: center;
}

.like-icon,
.comment-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}


.comment {
  margin-bottom: 10px;
}

.comment-header {
  display: flex;
  align-items: center;
}

.comment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-username {
  font-weight: bold;
  font-size: 14px;
}

.comment-body {
  font-size: 14px;
  color: #555;
}
</style>
